<template>
	<view class="content">
		<view class="param-one">
			<text>柜号</text>
			<view>{{detail.equipCode}}</view>
		</view>
		<view class="param-one">
			<text>设备ID</text>
			<view>{{detail.equipId}}</view>
		</view>
		<view class="param-one">
			<text>交易流水</text>
			<view>{{detail.txnNo || ''}}</view>
		</view>
		<view class="param-one">
			<text>操作指令</text>
			<view>{{ filterType(detail.type)}}</view>
		</view>
		<view class="param-one">
			<text>状态</text>
			<uni-tag type="primary" v-if="detail.status === 1" text="发起成功" />
			<uni-tag type="error" v-else-if="detail.status === 2" text="发起失败" />
			<uni-tag type="success" v-else-if="detail.status == 3" text="提取成功" />
			<span v-else>{{ detail.status }}</span>
		</view>
		<view class="param-one">
			<text>结果描述</text>
			<view>{{detail.reasonName || ''}}</view>
		</view>
		<view class="param-one">
			<text>创建时间</text>
			<view>{{detail.createTime || ''}}</view>
		</view>
		<view class="param-one">
			<text>接收时间</text>
			<view>{{detail.receiveTime || ''}}</view>
		</view>
		<view class="param-one">
			<text>文件列表</text>
			<view v-if="fileList.length==0">
				暂无
			</view>
		</view>
		<view class="filesView" v-for="(file,index) in fileList" :key="index">
			<image v-if="file.type == 1" :src="file.url" mode="widthFix"></image>
			<video v-if="file.type == 2" :src="file.url" controls="controls" style="width: 100%;height: 260rpx;">
				您的浏览器不支持 video 标签。
			</video>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	export default {
		data() {
			return {
				detail: {},
				IMGLink: this.IMGLink,
				fileList: [],
			}
		},
		computed: {
			...mapState(['enums']),
		},
		onLoad(option) {
			this.detail = JSON.parse(option.detail);

			this.fileList = this.detail.files ?
				this.detail.files.split(",").map((item) => {
					return {
						url: `${this.IMGLink}${item}`,
						type: this.checkImg(item),
						fileName: item && item.slice(item.lastIndexOf("/") + 1),
					};
				}) : [];
		},
		methods: {
			filterType(type) {
				let classify = this.enums.EQUIP_CAMERA_EXTRACT_LOG_TYPE.find(
					(p) => {
						return type != null ?
							type == p.code :
							"";
					}
				);
				return classify ? classify.label : "";
			},
			// 判断是否是图片格式 1图片 2视频
			checkImg(url) {
				let index = url.indexOf(".");
				let img_id = url.substring(index); //截断"."之前的，得到后缀
				if (
					img_id == ".bmp" ||
					img_id == ".png" ||
					img_id == ".gif" ||
					img_id == ".jpg" ||
					img_id == ".jpeg"
				) {
					return 1;
				} else {
					return 2;
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/common.scss";

	.content {
		padding: 0 20rpx 70rpx;

		.param-one {
			line-height: 92rpx;
			@include flexLayout(center, flex-start);
			border-bottom: 2rpx solid #E5E5E5;
			font-size: 28rpx;
			color: #333333;

			text {
				width: 240rpx;
			}
		}

		.filesView {
			text-align: center;
			image{
				width: 220rpx;
			}
		}
	}
</style>